<template>
  <div class="detail-container">
    <receipt-order-header
      v-if="isShow"
      :detailAll="detailAll"
      @OrderUrl="OrderUrl"
    ></receipt-order-header>
    <div class="detail-con">
      <receiving-address
        v-if="isShow"
        :detailAll="detailAll"
      ></receiving-address>
      <goods-info v-if="isShow" :detailAll="detailAll" :receipt="true"></goods-info>
      <money-info v-if="isShow" :detailAll="detailAll"></money-info>
    </div>
    <div class="btn-box">
      <van-button class="btn" round @click="saveReceipt">保存图片</van-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import receiptOrderHeader from "./components/receiptOrderHeader";
import goodsInfo from "./components/goodsInfo";
import receivingAddress from "./components/receivingAddress";
import moneyInfo from "./components/moneyInfo";
import { getOrderDetail, getReceiptSnapshot } from "@/api/order/order.js";
import small from "@/smallapp/small";
import Storage from "@/utils/store.js";
  import { getPoster } from '@/api/item/activity'

export default Vue.extend({
  components: {
    receiptOrderHeader,
    goodsInfo,
    receivingAddress,
    moneyInfo,
  },
  data() {
    return {
      isShow: false,
      detailAll: {},
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        if (val.query.supid != oldVal.query.supid) {
          // this.init()
          // TODO 小程序使用init
            this.init()
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  methods: {
    OrderUrl(query) {
      this.init(query)
    },
    init() {
      const queryData = {
        id: this.$route.query.id,
        page: this.$route.query.page,
        label_type: this.$route.query.label_type,
        order_receipt: 1,
      };
      if (this.$route.query.supid != "undefined") {
        queryData.supid = this.$route.query.supid
      }
      if (this.$route.query.child_user_id != "undefined") {
        queryData.child_user_id = this.$route.query.child_user_id
      }
      if (this.$route.query.is_Lazy_cat_dz != "undefined") {
        queryData.is_Lazy_cat_dz = this.$route.query.is_Lazy_cat_dz
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getOrderDetail(queryData).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.detailAll = res.data
          this.isShow = true;
        } else {
          this.$Error(res.msg)
        }
      });
    },
    saveReceipt() {
      this.$loadingWrap.show()
      const apiurl = small.globalData.appApiUrl
      // // const url = "https://m.wfx.wxfenxiao.com/Poster/order_receipt?sid=6&pid=1960&jwt_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaG9wX2lkIjo2LCJ1c2VyX2lkIjozNTU0NTE0MiwiaWQiOjI0ODM4NiwidHlwZSI6InBvc3Rlcl9vcmRlcl9yZWNlaXB0Iiwic2NlbmUiOjIsImV4cCI6MTY1NjAzOTUzOSwiaWF0IjoxNjU1NDM0NzM5LCJpc3MiOiJxbS5xaWJjbXMuY29tIn0=.bFVNSUVBa3VFTGo4aEFpL2tRV0VSWWJENjQxYXJBSW9PTXh6YU1NZndQVT0";
      let url = apiurl + this.detailAll.snapshot_url 
      // // console.log('urlurl:', url)
      // Storage.saveLocal('webSrc', url)
      // this.$JumpName(this, 'webView', {title: '订单回执', type: 1})
      getPoster({
          source_url: url,
          x: 0,
          y: 0,
          width: 350,
          height: 492
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            small.saveImage(res.data)
          } else {
            this.$Error(res.msg)
          }
        })
    }

  },
});
</script>
<style  lang="scss">
@import "src/styles/order/detail";
.btn-box {
  text-align: right;
  padding-right: 40px;
  .btn {
    width: 166px;
    height: 72px;
    margin: 0 6px;
    font-size: 28px;
    border: 1px solid rgba(233, 1, 4, 1);
    color: rgba(233, 1, 4, 1);
    background: transparent;
  }
}
</style>